<template>
	<div>
		<p>{{ state.msg }}</p>
		<p>{{ state.number }}</p>
		<p>
			<button class="button" @click="add">++</button>
			<button class="button" @click="sub">--</button>
		</p>
		<p>
			<button class="button" @click="login">login</button>
		</p>
	</div>
</template>

<script setup>
import { reactive, computed } from "vue";
import { useStore } from "vuex";
import { LoginRequest } from "../../api/api";
const store = useStore();
const state = reactive({
	msg: "hello world",
	user: {
		username: "15653116166",
		password: "maruiqq100"
	},
	number: computed(() => store.state.number),
});

function add(){
	store.commit("add");
}
function sub(){
	store.commit("sub");
}
function login(){
	LoginRequest(state.user).then(({ data: res }) => {
		console.log(res);
	});
}
</script>

<style lang="less" scoped>
</style>